<template>
  <el-container class="Information">

    <!--侧边栏-->
    <el-aside :class="aside_show">
      <div class="retractable" @click="asideShow">
        <el-button type="text" class="Label_show" v-show="!isCollapse">赛事咨讯<i class="el-icon-arrow-right"></i></el-button>
        <el-button type="text" class="el-icon-more Label" v-show="isCollapse"></el-button>
      </div>
      <el-menu :default-active="hover"
               class="el-menu-vertical-demo"
               :collapse="isCollapse"
               active-text-color="rgb(255, 208, 75)"
               @select="select">
        <el-menu-item index="competitionList">
          <i class="el-icon-set-up"></i>
          <span slot="title">赛事列表</span>
        </el-menu-item>
        <el-menu-item index="EventDynamics">
          <i class="el-icon-trophy-1"></i>
          <span slot="title">赛事动态</span>
        </el-menu-item>
        <el-menu-item index="announcement">
          <i class="el-icon-bell"></i>
          <span slot="title">通知公告</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!--侧边栏-->

    <!--主要内容-->
    <el-main>
      <router-view></router-view>
    </el-main>
    <!--主要内容-->

  </el-container>
</template>

<script>
export default {
  name: "Information",
  data() {
    return {
      isCollapse: false,
      aside_show: 'aside_show',
      hover: 'competitionList'
    }
  },
  methods: {
    asideShow() {
      this.isCollapse = !this.isCollapse;
      this.aside_show = !this.isCollapse?"aside_show":"aside";
    },
    select(key) {
      this.$router.push('/information/'+key);
    }
  },
  mounted() {
    const a = this.$route.path.indexOf('/',13)?this.$route.path.length:this.$route.path.indexOf('/',13)-1;
    if ((this.$route.path.substr(13,a)==='competitionList') || (this.$route.path.substr(13,a)==='gamesDetails')) this.hover = 'competitionList';
    else if((this.$route.path.substr(13,a)==='EventDynamics') || (this.$route.path.substr(13,a)==='DynamicArticles')) this.hover = 'EventDynamics';
    else if((this.$route.path.substr(13,a)==='announcement') || (this.$route.path.substr(13,a)==='announcementArticles')) this.hover = 'announcement';
  },
  watch: {
    $route: {
      handler: function (val) {
        const a = val.path.indexOf('/', 13) ? val.path.length : val.path.indexOf('/', 13) - 1;
        if ((val.path.substr(13, a) === 'competitionList') || (val.path.substr(13, a) === 'editTeam')) this.hover = 'competitionList';
        else if ((val.path.substr(13, a) === 'EventDynamics') || (val.path.substr(13, a) === 'DynamicArticles')) this.hover = 'EventDynamics';
        else if ((val.path.substr(13, a) === 'announcement') || (val.path.substr(13, a) === 'announcementArticles')) this.hover = 'announcement';
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Information {
  background-color: #f7f8fa;
  padding: 40px 50px;
  .aside_show{
    //background-color: #125716;
    width: 160px !important;
    .retractable{
      width: 100%;
      background-color: #ffffff;
      line-height: 40px;
      text-align: center;
      .Label_show{
        color: black !important;
        font-size: 18px !important;
        margin: 0;
      }
    }
    .el-menu-vertical-demo{
      &.el-menu-vertical-demo:not(.el-menu--collapse) {
        border: none;
        text-align: left;
      }
      &.el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 160px;
        min-height: 400px;
      }
      &.el-menu--collapse{
        width: 100%;
        min-height: 400px;
        border: none;
        text-align: left;
      }
    }
  }
  .aside{
    width: 64px !important;
    height: 200px;
    overflow: hidden;
    font-size: 18px !important;
    font-weight: 500.8;
    line-height: 30px;
    text-align: center;
    //background-color: #125716;
    .retractable{
      background-color: #ffffff;
      .Label{
        font-size: 18px !important;
        color: #000509 !important;
        margin: 0;
      }
    }
    .el-menu-vertical-demo{
      &.el-menu-vertical-demo:not(.el-menu--collapse) {
        border: none;
        text-align: left;
      }
      &.el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 160px;
        min-height: 400px;
      }
      &.el-menu--collapse{
        width: 100%;
        min-height: 400px;
        border: none;
        text-align: left;
      }
    }
  }
  .el-main{
    padding: 0;
  }

}

</style>
